import React, { Component } from "react";
import "./TodoHeader.css"; //css 样式文件后缀必须要写

export default class TodoHeader extends Component {
    state = {
        //任务名称
        title: "",
    };
    render() {
        return (
            <div className="todo-header">
                <input
                    type="text"
                    placeholder="请输入你的任务名称，按回车键确认"
                    value={this.state.title}
                    onChange={this.handleChange}
                    onKeyDown={this.add}
                />
            </div>
        );
    }

    //新增任务
    add = (e) => {
        if (e.keyCode === 13) {
            // console.log("新增");
            //新增任务
            this.props.addTodo(this.state.title);
        }
    };

    handleChange = (e) => {
        this.setState({
            title: e.target.value,
        });
    };
}
